<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 视图  view -->
    <div id="app">
        <!-- 文本插值 -> 使用data中的数据 -->
        <!-- <p>{{message}}</p>
        <p>{{count}}</p>
        <p>{{bool}}</p>
        <p>{{a}}</p>
        <p>{{b}}</p>
        <p>{{arr}}</p>
        <p>{{obj}}</p> -->

        <!-- 文本插值 -> 使用javascript表达式(运算符和操作符(变量->data中数据)组成的式子 函数也是表达式) -->

        <!-- <p>{{count + 100}}</p>
        <p>{{count > 50}}</p>
        <p>{{!!count}}</p>
        
        <p>{{count % 2 ? true:false}}</p>

        <p>{{message.split("").reverse().join("")}}</p>
        <p>{{say()}}</p> -->

        <p>{{html}}</p>
            
        <!-- if  => 流程控制 -->
        <!-- <p>{{if(count>100){true}}}</p> -->
        <!-- 变量声明 -->
        <!-- <p>{{var num = 100}}</p> -->

    </div>

  
</body>
<script>

    // Vue的特征:
    // 1. 声明式渲染 
    // 2. 响应式

    // 注意:
    // 1. Vue实例中挂载的数据,只能在挂载的元素内的模板语法中使用
    // 2. Vue实例中如果数据发生改变, 对应的视图也会更新 (Vue内部已经实现)
    // 3. 为了方便操作数据 调用方法 => options配置的 data相关的数据, methods相关的方法,以及计算属性,都会在实例化对象中绑定一份   => 可以直接通过实例化对象访问data/计算属性中的数据和methods中的方法
    // 4. 如果创建Vue实例过程中(new Vue(options)) , options没有配置el参数,可以在实例化对象创建完毕,调用Vue实例的$mount(el)方法设置挂载的元素
    // 5. 如果创建Vue实例过程中 实例只能在元素中挂载一次
    // 6. 一般情况下,一个页面只有一个根实例(应用 -> body的第一个子元素)


    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

    // Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

    // 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。


    // 模板语法
    // 插值
    //    {{}} 文本插值(在标签对之间使用 -> 拼接)
    //     a. {{xxx}} 将会被替代为对应 数据对象(data) 上对应属性名的值
    //        (1) 如果data上对应属性名的值是null和undefined  =>  在模板中会被渲染为""
    //        (2) 如果data上对应属性名的值是数组和对象类型  =>  会先隐式转化为json字符串 再在模板中被渲染为
    //     b. 可以接收javascript表达式 -> {{xxx}} 将会被替代为表达式的结果(值))

    //     双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

    // 指令 
    // v-html
    // v-if  v-else  v-else-if
    // v-show
    // v-for
    


    // Vue实例(应用)   => 控制层 View Model
    var vm = new Vue({
        // el:"#app",  // 挂载的元素
        // 数据层 Model
        data:{   // 挂载的数据  => 可以在挂载的元素中对应属性名将属性值渲染到元素中
            message:"hello world",
            count:100,
            bool:true,
            a:null,
            b:undefined,
            arr:[1,2,3,],
            obj:{a:1,b:2},
            html:"<i>hello world</i>"
        },
        methods:{ // 挂载的方法 => 方法可以有多个
            addCount:function(){
                console.log(this); //this -> 当前vue实例
                this.count ++;
            },
            say(){
                return "hello";
            }
        }
    })
    console.log(vm);
    vm.$mount("#app");


    

  



</script>
</html>